<template>
  <div
    class="auto-scale-wrapper"
    :style="{
      transform: `scale(${scale})`,
      width: baseWidth + 'px',
    }"
  >
      <!-- height: baseHeight + 'px', -->
    <slot :scale="scale" />
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted, provide } from 'vue';

const baseWidth = 480;
// const baseHeight = 1000;

const scale = ref(1);

// 动态计算缩放
const calculateScale = () => {
  const windowWidth = window.innerWidth;
  scale.value = windowWidth / baseWidth;
};

onMounted(() => {
  calculateScale();
  window.addEventListener('resize', calculateScale);
});

onUnmounted(() => {
  window.removeEventListener('resize', calculateScale);
});

// 提供 scale 给子组件使用
provide('scale', scale);
</script>

<style scoped>
.auto-scale-wrapper {
  transform-origin: top left;
  position: relative;
  overflow: hidden;
}
</style>
